<template>
    <div class="register">
        <span class="bigtitle">注册</span>
        <span class="smalltitle">世界因而的存在而变得更加美好！</span>
        <div class="form_input">
            <div style="margin: .2415rem 0;width: 100%; display: flex;
            justify-content: center; align-items: center;">
                <label for="name">账号：</label><input type="text" id="name" placeholder="输入账号" v-model="registerInfo.username">
            </div>
            <div style="width: 100%;display: flex;
            justify-content: center; align-items: center;">
                <label for="password">密码：</label><input type="password" id="password" placeholder="输入密码" v-model="registerInfo.password">
            </div>
            <div style="margin: .2415rem 0;width: 100%;display: flex;
            justify-content: center; align-items: center;">
                <label for="phone">电话：</label><input type="tel" id="phone" placeholder="输入电话" v-model="registerInfo.phone">
            </div>
            <div style="width: 100%;display: flex;
            justify-content: center; align-items: center;">
                <label for="sex">性别：</label><el-select v-model="registerInfo.gender" class="m-2" placeholder="Select" id="sex">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
        </div>
        <span style="color: red;text-align: center;">{{ errormsg }}</span>
        <button class="goregister" :disabled="lodding" @click="goregister" :style="{ opacity: !lodding ? 1 : .5 }"><span class="loader"
        v-if="lodding"></span>{{ lodding ? "注册中" : "注册" }}</button>
        <span style="color: rgb(5,86,205);text-align: center;" @click="router.push('/login')">已有账号？去登录</span>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {goRegister} from '@/api/index';
const route = useRoute();
const router = useRouter();
// 加载动画
let lodding = ref(false);
// 错误信息
let errormsg = ref();
// 注册信息
let registerInfo=reactive({
    username:'',
    password:'',
    phone:'',
    gender:'男'
})
const goregister =async () => {
  lodding.value = true;
  let res = await goRegister(registerInfo);
  console.log(res);
 if (res.data.code==200) {
    // 注册成功
    /*
    跳转页面
    */
    router.push("/login");
  } else {
    // 失败
    errormsg.value = res.data.msg;
    lodding.value = false;
    setTimeout(()=>{
        errormsg.value = ''
    },2000)
  }
};
// 下拉框的选项
const options = [
    {
        value: '男',
        label: '男',
    },
    {
        value: '女',
        label: '女',
    }]
onMounted(() => {
    //console.log('3.-组件挂载到页面之后执行-------onMounted')
})
</script>
<style scoped lang='css'>
.register {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    transform: translateY(-10%);
}

.form_input {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: .9831rem;
}

input {
    border: 0;
    background-color: rgb(249, 249, 250);
    border-radius: .4415rem;
    padding: .3415rem .3831rem;
    color: #585555;
    width: 70%;
}
.el-select {
    border-radius: .4415rem;
    padding: .3415rem .3831rem;
    color: #585555;
    width: 70%;
}

input::placeholder {
    color: rgb(179, 180, 191);
}


.bigtitle {
    text-align: center;
    font-size: .6039rem;
}

.smalltitle {
    text-align: center;
    color: rgb(179, 180, 191);
    margin-top: .4831rem;
}
.goregister {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 82, 204);
  color: #fff;
  margin-top: .4831rem;
  border: 0;
  border-radius: .4415rem;
  padding: .2831rem;
  margin: .3623rem .7246rem;
}
.loader {
  display: inline-block;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin-right: .1932rem;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>